<template>
  <div>
    <el-menu
      :default-active="menuLight"
      class="el-menu-vertical-demo"
      text-color="#000000"
      @open="handleOpen"
      @close="handleClose"
    >
      <router-link :to="index.path">
        <el-menu-item :index="index.component">
          <i :class="index.icon"></i>
          <span slot="title">{{ index.title }}</span>
        </el-menu-item>
      </router-link>
      <el-submenu :index="menu.name" :key="menu.title" v-for="menu in menuList">
        <template slot="title">
          <i :class="menu.icon"></i>
          <span>{{ menu.title }}</span>
        </template>
        <router-link
          :to="item.path"
          :key="item.title"
          v-for="item in menu.children"
          ><el-menu-item :index="item.name">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item></router-link
        >
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "SideMenu",
  data() {
    return {  index: this.$store.state.index };
  },
  methods: {
    handleOpen(key, keyPath) {},
    handleClose(key, keyPath) {},
  },
  computed: {
    menuLight: {
      get() {
        return this.$store.state.menus.editableTabsValue;
      },
    },
    menuList: {
      get() {
        return this.$store.state.menus.menuList;
      },
    },
  },
};
</script>

<style>
a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
}
</style>